import React, { useContext, useReducer, useState } from 'react'
import './App.css'
import { GlobalContextProvider, GlobalContext } from './hook/globalContext'
import { countInitState, countReducer } from './store/countReducer'

const redTheme = {
  color: 'red',
}

const greenTheme = {
  color: 'green',
}

function Content() {
  const { color, switchTheme,count,dispatchCount } = useContext(GlobalContext)
  console.log('render-Content')
  return (
    <>
      <h1 style={{ color: color }}>Hello world</h1>
      <button onClick={() => {
        switchTheme(redTheme)
        dispatchCount&&dispatchCount({type:'setCount'})
      }
      }>Red Theme:{count}</button>
      <button onClick={() => switchTheme(greenTheme)}>Green Theme</button>
    </>
  )
}
function Header() {
  console.log('render Header')
  return <h1>Hello CodeSandbox</h1>
}
function ThemeProviders(props: any) {
  const [theme, switchTheme] = useState({ color: 'red' })
  const [state, dispatch] = useReducer(countReducer, countInitState);
  console.log(state,'render-ThemeProviders1')
  return (
    <GlobalContextProvider value={{ color: theme.color,count:state.count,dispatchCount:dispatch, switchTheme }}>
      {props.children}
    </GlobalContextProvider>
  )
}
function App1() {
  console.log('render App')
  return (
    <ThemeProviders>
      <div className='App'>
        <Header />
        <Content />
      </div>
    </ThemeProviders>
  )
}
export default App1
